<!-- 美食详情 -->
<template>
  <view class="detail">
    <view class="bg_img">
      <view class="pos_card">
        <view class="card_top">
          <view class="name_tags">
            <view class="name">美食名字</view>
            <view class="tags">
              <view class="tags_item tags_left">小吃</view>
              <view class="tags_item tags_right">美食</view>
            </view>
          </view>
          <view class="map_icon">
            <img
              src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/51a97551e0969b4e12081b9d5dc37d94.png"
              alt=""
            />
          </view>
        </view>
        <view class="card_address">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/6c9217bfab235e732f37439cc5bd27ff.png"
            alt=""
          />
          <view>浙江省杭州市西湖区西湖风景区</view>
        </view>
        <view class="card_address">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/f6e78837c4d417ceb8c49872b73daf51.png"
            alt=""
          />
          <view>131561511651</view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="title"> 相关菜品 </view>
      <view class="food_list">
        <div class="food_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/15ed92af2ffbeb1fba80d8b7a9b6882b.jpg"
            alt=""
          />
        </div>
        <div class="food_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/15ed92af2ffbeb1fba80d8b7a9b6882b.jpg"
            alt=""
          />
        </div>
        <div class="food_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/15ed92af2ffbeb1fba80d8b7a9b6882b.jpg"
            alt=""
          />
        </div>
      </view>
      <view class="title"> 美食介绍 </view>
      <view class="intro">
        上海航宇科普中心(以下简称“中心”)是全国、上海市和闵行
        区科普教育基地、中国大型客机项目宣传基地、上海市工业旅游
        景点服务质量优秀单位、上海市教委二期课改定点科普教育基地
        专门从事航空航天科技知识的宣传普及工作。<br />
        “上海航空科普馆”隶属于上海航宇科普中心，是上海市专题
        性科普场馆。在10000平方米的外场展区拥有歼-8E、DC-8等
        十余架不同类型的实物飞行器。四个室内展厅共计2000平方米
        其主题分别是“走近中国大飞机”、“寻觅人类飞行的足迹”、“探
        索飞行的奥秘”和“创新人才工作室”和一个3D影院，拥有十余台
        实验装置以及模拟飞行体验区。
        中心每年组织开展各类丰富多彩的科普活动，如：国际少
        年儿童航空绘画比赛、上海“航宇杯”静态比例模型比赛、飞行之
        星——上海青少年模拟飞行比赛、航空科技夏令营、航宇科普知
        识讲座、科普巡展和“中小学校-科普基地"共建结对活动等。通
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  mounted() {},
};
</script>
<style lang="scss">
.detail {
  width: 100vw;
  height: 100vh;
  .bg_img {
    width: 100%;
    height: 600rpx;
    background-image: url("https://file.zhongzhiyou.cn/43/IMAGE/20211207/406cf70c2459febea2486295c8de390f.png");
    background-size: 100% 100%;
    position: relative;
    .pos_card {
      position: absolute;
      bottom: -102rpx;
      background-color: #fff;
      border-radius: 20rpx 20rpx 0 0;
      margin-left: 24rpx;
      width: calc(100% - 48rpx);
      padding: 20rpx;
      .card_top {
        display: flex;
        justify-content: space-between;
        .name_tags {
          display: flex;
          flex-direction: column;
          .name {
            font-size: 28rpx;
            font-weight: 500;
            color: #000000;
          }
          .tags {
            display: flex;
            margin-top: 20rpx;
            .tags_item {
              width: 60rpx;
              text-align: center;
              line-height: 30rpx;
              height: 30rpx;
              border-radius: 10rpx;
              font-size: 20rpx;
              font-weight: 500;
              color: #ffffff;
            }
            .tags_left {
              background: #f2b04f;
            }
            .tags_right {
              margin-left: 20rpx;
              background: #ea6923;
            }
          }
        }
        .map_icon {
          width: 63rpx;
          height: 63rpx;
          background-image: url("https://file.zhongzhiyou.cn/43/IMAGE/20211207/5fa3f2167d32bfb7fda621f734aa3ad9.png");
          background-size: 100% 100%;
          text-align: center;
          line-height: 63rpx;
          img {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
      .card_address {
        display: flex;
        font-size: 26rpx;
        margin-top: 20rpx;
        align-items: center;
        font-weight: 400;
        color: #333333;
        img {
          width: 21rpx;
          height: 26rpx;
          margin-right: 11rpx;
        }
      }
    }
  }
  .content {
    margin-top: 102rpx;
    margin-left: 24rpx;
    width: calc(100% - 48rpx);
    .title {
      //   margin-left: 24rpx;
      //   width: calc(100% - 48rpx);
      padding-top: 30rpx;
      padding-bottom: 20rpx;
      border-top: 2rpx solid #f3f3f3;
      font-size: 26rpx;
      font-weight: 400;
      color: #333333;
    }
    .food_list {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      margin-bottom: 30rpx;
      .food_item {
        width: 223rpx;
        height: 150rpx;
        img {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }
    }
    .intro {
      font-size: 24rpx;
      font-weight: 500;
      color: #333333;
      text-indent: 2em;
      padding-bottom: 30rpx;
    }
  }
}
</style>